<template>
  <div class="videoDown">
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;"><div class="border"></div><h3>{{videoDown.title}}</h3></el-col>
    </el-row>
    <el-row> 
      <el-col :span="16">
      <div style="display:flex;align-items: center;margin-left:20px">
          <p style="width:50px;">{{videoDown.find}}</p>
          <el-input style="width:260px;margin-right:5px" :placeholder="videoDown.findhint" v-model.trim="oldName" @keyup.enter.native.prevent="search"></el-input>
          <el-button class="searchBtn boxShadowButton" @click="search">{{videoDown.search}}</el-button>
          <p style="margin-left:30px;color:#666666">{{videoDown.findhinttxt}}</p>
      </div>
      </el-col>
    </el-row>
     <el-table ref="tableList" :data="tableData"  style="width: 100%;margin-top:10px;margin-left:20px" @row-click="detailClick"  :row-style="tableRowStyle" :header-cell-style="tableHeaderColor">
        <el-table-column type="index" :label="habitableRoomManagement.sort" min-width="50" align="center"></el-table-column>
        <el-table-column prop="roomNo" :label="habitableRoomManagement.roomNo" min-width="120" align="center"></el-table-column>
        <el-table-column prop="buildingName"  :label="habitableRoomManagement.manNumber" min-width="120" align="center"></el-table-column>
        <el-table-column prop="checkInStatus"  :label="habitableRoomManagement.status" min-width="120" align="center"></el-table-column>
        <el-table-column prop="oldName" :label="videoDown.name" min-width="120" align="center"></el-table-column>
      </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      style="margin-top:20px"
      align= "center"
       :current-page='currentPage'
      @current-change="changePage">
    </el-pagination>
  </div>  
</template>
<script>
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  name:"VideoDownTumblePlay",
  data() {
    return {
      videoDown: this.$t('m.videoDown'),//引入 lang 里面的字符串资源,
      habitableRoomManagement: this.$t("m.habitableRoomManagement"), //引入 lang 里面的字符串资源,
      deletDialogVisible:false,
      id:0,
      size:"mini",
      oldName:'', //搜索框老人姓名
      tableData:[],
      total:0,
      pageNum:1,
      pageSize:10,
      currentPage:1,
       firstPage:'',//第一页
      lastPage:'',//最后一页
      roomId:"",
      DefaultSetting:{},
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文

    }
  },
  methods:{
    formatStat(row,index){
      if(row.checkStat == 1){
        return '入居中';
      }else{
        return '一時外出中';
      }
    },
     //跳转详情
    detailClick(row){
      sessionStorage.setItem("oldmanId",row.oldmanId);
      sessionStorage.setItem("downOldName",row.oldName);
      sessionStorage.setItem("roomId", row.id);
      sessionStorage.setItem("roomNo", row.roomNo);
      sessionStorage.setItem("intoType","fix");
      bus.$emit("homePage", {
            type: "jump",
            path: "/TumbleDown",
            title: "転倒アラート録画詳細"
      });
    },
     //上一页
    prevePage(){
      this.pageNum= this.pageNum>this.firstPage ? this.pageNum-1 : this.firstPage;
      this.getList()
    },

    //下一页
    nextPage(){
      this.pageNum= this.pageNum<this.lastPage ? this.pageNum+1 : this.lastPage;
      this.getList()
    },
    //搜索查询
    search(){
      this.pageNum = 1
      this.getList()
    },
    //查询列表
    getList(){
      let param ={
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        // name:this.oldName
      }
      if(this.oldName != ''){
        param.name = this.oldName;
      }
      this.$get('omc/Room/listLifeRooms',param,this.acceptLanguage).then(res =>{
        res.list.forEach(item => {
          if (item.checkInStatus == 1) {
            item.checkInStatus = this.habitableRoomManagement.checkIn;
          } else {
            item.checkInStatus = this.habitableRoomManagement.nocheck;
          }
        });
        this.tableData = res.list
        this.total = Number(res.total)
        this.currentPage = res.pageNum;
        this.firstPage= res.firstPage//第一页
        this.lastPage= res.lastPage//最后一页
      })
    },
    //翻页
    changePage(val){
      this.pageNum = val
      this.getList()
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },
  },
  created() {

  },
  mounted() {
    this.getList()
    sessionStorage.removeItem("sessionStorage");
    bus.$on('changeResident',() =>{
       this.getList()
    })
  },
   destroyed() {
    bus.$off("changeResident");
  }
}
</script>
<style lang="scss" scoped>
.videoDown{
  .prevPage{
      background:#409efe;
      color:#ffffff;
    }
    .nextPage{
      background: #ffffff;
    }
  .border{
    width: 10px;
    height: 30px;
    background: black;
    margin-right: 10px;
  }
  .addBtn{
    color:#7e7e7e;
  }
  .searchBtn{
    background: #409EFF;
    color: #ffffff
  }
  .detailBtn{
    background: #409EFF;
    color:#ffffff;
    border-radius: 5px;
  }
  .deleteBtn{
    background: #dddddd;
    color:#010101;
    border-radius: 5px;
  }
}
</style>